/**
 * 创建 dom
 * @param {*} mode 
 * @returns 
 */
function createDom(mode) {
    return document.createElement(mode);
}

/** 图片大图预览 */
function imagePreview(file) {
    // console.log('文件', file);
    initImagePreview(file);
}

/** 缩放 */
var scaleNum = 1;
/** 角度 */
var rotateNum = 0;
/** 是否图片自动大小 */
var isFull = false;

var preBox = null;
/** init 图片预览 */
function initImagePreview(file) {
    preBox = createDom('div');
    preBox.className = 'preview-image';

    var closeDom = createDom('div');
    var closeSDom = createDom('span');
    closeDom.className = 'preview-close';
    closeSDom.className = 'mdi mdi-close';
    closeDom.onclick = function () {
        preClose(preBox);
    }

    closeDom.appendChild(closeSDom);
    preBox.appendChild(closeDom);

    var conDom = createDom('div');
    var conImg = new Image();
    conDom.className = 'preview-content';

    conImg.className = 'preview-img';
    conImg.style = 'transform: scale(' + scaleNum + ') rotate(' + rotateNum + 'deg); margin-left: 0px; margin-top: 0px; max-height: 100%; max-width: 100%;';
    conImg.src = file;

    conDom.appendChild(conImg);
    preBox.appendChild(conDom);

    var opBox = createDom('div');
    opBox.className = 'preview-op';

    var opSDom1 = createDom('span');
    opSDom1.className = 'mdi mdi-minus-circle-outline';
    opSDom1.onclick = function () {
        previewScale(0, conImg);
    }

    var opSDom2 = createDom('span');
    opSDom2.className = 'mdi mdi-plus-circle-outline';
    opSDom2.onclick = function () {
        previewScale(1, conImg);
    }

    var opSDom3 = createDom('span');
    opSDom3.className = 'mdi mdi-crop-free';
    // opSDom3.className = 'mdi mdi-fullscreen'
    opSDom3.onclick = function () {
        previewFull(this, conImg);
    }

    var opSDom4 = createDom('span');
    opSDom4.className = 'mdi mdi-rotate-left';
    opSDom4.onclick = function () {
        previewRotate(0, conImg);
    }

    var opSDom5 = createDom('span');
    opSDom5.className = 'mdi mdi-rotate-right';
    opSDom5.onclick = function () {
        previewRotate(1, conImg);
    }

    opBox.appendChild(opSDom1);
    opBox.appendChild(opSDom2);
    opBox.appendChild(opSDom3);
    opBox.appendChild(opSDom4);
    opBox.appendChild(opSDom5);
    preBox.appendChild(opBox);

    $('body').append(preBox);
    $('body').css('overflow', 'hidden');
    mousewheel(conImg);
    escFn();
}

/** 关闭预览 */
function preClose(dom) {
    $(dom).remove();
    $(document).unbind('mousewheel DOMMouseScroll');
    scaleNum = 1;
    rotateNum = 0;
    isFull = false;
    preBox = null;
    $('body').css('overflow', 'auto');
    $(document).unbind('keydown');
}
/** ESC 关闭预览弹窗 */
function escFn() {
    $(document).bind('keydown', function (e) {
        if (e.keyCode == 27) {
            preClose(preBox);
        }
    });
}

/**
 * 图片缩放
 * @param {*} type 0 缩小 1 放大
 * @param {*} dom 
 */
function previewScale(type, dom) {
    if (type == 0) {
        if (parseFloat(scaleNum).toFixed(1) > 0.2) {
            scaleNum = scaleNum - 0.2;
        } else {
            scaleNum = 0.2;
        }
    } else {
        scaleNum = scaleNum + 0.2;
    }

    dom.style.transform = 'scale(' + scaleNum + ') rotate(' + rotateNum + 'deg)';
    dom.style.transition = 'transform 0.3s ease 0s';
}

/**
 * 图片旋转
 * @param {*} type 0 左旋转 1 右旋转
 * @param {*} dom 
 */
function previewRotate(type, dom) {
    if (type == 0) {
        rotateNum = rotateNum - 90;
    } else {
        rotateNum = rotateNum + 90;
    }
    dom.style.transform = 'scale(' + scaleNum + ') rotate(' + rotateNum + 'deg)';
    dom.style.transition = 'transform 0.3s ease 0s';
}

/**
 * 是否自动大小
 * @param {*} cDom 操作按钮 dom
 * @param {*} iDom 要操作元素的dom
 */
function previewFull(cDom, iDom) {
    if (!isFull) {
        cDom.className = 'mdi mdi-fullscreen-exit';
        iDom.style = 'transform: scale(' + scaleNum + ') rotate(' + rotateNum + 'deg); margin-left: 0px; margin-top: 0px; max-height: none; max-width: none;';
    } else {
        cDom.className = 'mdi mdi-crop-free';
        iDom.style = 'transform: scale(' + scaleNum + ') rotate(' + rotateNum + 'deg); margin-left: 0px; margin-top: 0px; max-height: 100%; max-width: 100%;';
    }
    isFull = !isFull;
}

/** 鼠标滚轮事件 */
function mousewheel(dom) {
    // 缩放值
    // var sNum = 0.015;
    var sNum = 0.02;
    $(document).bind('mousewheel DOMMouseScroll', function (event) { // on也可以 bind监听
        //Chorme
        var wheel = event.originalEvent.wheelDelta;
        var detal = event.originalEvent.detail;
        if (event.originalEvent.wheelDelta) { // 判断浏览器IE,谷歌滚轮事件               
            if (wheel > 0) { // 当滑轮向上滚动时
                scaleNum = scaleNum + sNum;
            }
            if (wheel < 0) { // 当滑轮向下滚动时
                if (parseFloat(scaleNum).toFixed(1) > 0.2) {
                    scaleNum = scaleNum - sNum;
                } else {
                    scaleNum = 0.2;
                }
            }
        } else if (event.originalEvent.detail) { // Firefox滚轮事件
            if (detal > 0) { // 当滑轮向下滚动时
                if (parseFloat(scaleNum).toFixed(1) > 0.2) {
                    scaleNum = scaleNum - sNum;
                } else {
                    scaleNum = 0.2;
                }
            }
            if (detal < 0) { // 当滑轮向上滚动时
                scaleNum = scaleNum + sNum;
            }
        }

        dom.style.transform = 'scale(' + scaleNum + ') rotate(' + rotateNum + 'deg)';
        dom.style.transition = 'transform 0.3s ease 0s';
    });
}